<template>
    <div class="madp-verbal">
        <basic-container>
            <el-form class="madp-verbal-search" label-width="120px" inline>
                <el-form-item label="话术内容:">
                    <el-input v-model.trim="searchT" placeholder="请输入话术内容" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList()">搜索</el-button>
                    <el-button @click="clearInputFn">清空</el-button>
                </el-form-item>
            </el-form>
            <div class="madp-verbal-content">
                <div class="madp-verbal-content-group">
                    <div class="madp-verbal-content-group-btns">
                        <el-button v-if="permissions.cp_verbal_manage_add" type="primary" @click="handleAddVerbal">新建话术</el-button>
                        <el-button v-if="permissions.cp_verbal_manage_group_add" type="text" icon="el-icon-plus" size="medium" @click="handleAddGroup">添加分组</el-button>
                    </div>
                    <div class="madp-verbal-content-group-list" v-show="groupData.length > 0">
                        <el-tree
                            ref="tree"
                            class="filter-tree"
                            :data="groupData"
                            :props="defaultProps"
                            node-key="id"
                            :current-node-key="0"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :default-expand-all="false"
                            @node-click="handleNodeClick"
                        >
                            <div class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                                <el-popover placement="right" trigger="click" v-if="(permissions.cp_verbal_manage_group_edit || permissions.cp_verbal_manage_group_del) && data.id != 0">
                                    <div class="madp-sort-list-display">
                                        <el-button v-if="permissions.cp_verbal_manage_group_edit" type="text" class="madp-sort-list-display-btn" @click="editGroup(data)">
                                            <i class="el-icon-edit"></i>编辑
                                        </el-button>
                                        <el-button v-if="permissions.cp_verbal_manage_group_del" class="madp-sort-list-display-delete" type="text" @click="deleteGroup(data)">
                                            <i class="el-icon-delete"></i>删除
                                        </el-button>
                                    </div>
                                    <i slot="reference" class="el-icon-s-operation"></i>
                                </el-popover>
                            </div>
                        </el-tree>
                    </div>
                </div>
                <div class="madp-verbal-content-list">
                    <div class="madp-verbal-content-list-visible" v-if="activeGroup.id != 0">
                        <span class="bold">【{{ activeGroup.name }}】</span>可见范围:
                        <span v-if="activeGroup.visibleRange === 1">全部员工可见&nbsp;&nbsp;</span>
                        <span v-if="activeGroup.visibleRange === 2">指定部门可见&nbsp;&nbsp;</span>
                        <el-button v-if="activeGroup.visibleRange === 2 && activeGroup.children" type="text" @click="viewGroupVisible">查看</el-button>
                        <el-button v-if="activeGroup.children" type="text" @click="editGroupVisible">修改</el-button>
                    </div>
                    <el-table :header-cell-style="headerCellStyle" stripe :data="tableData" v-loading="tableloading">
                        <el-table-column label="序号" width="80">
                            <template slot-scope="scope">
                                <span v-text="getIndex(scope.$index)"></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="content" label="话术内容">
                            <template slot-scope="scope">
                                <p class="madp-content-T">{{ scope.row.content }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="collectionTitle" label="标题" width="140">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.collectionTitle ? scope.row.collectionTitle : '--' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="所属分组" width="120">
                            <template slot-scope="scope">
                                <p class="madp-content-T">{{ scope.row.mediumGroupName }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="username" label="创建人" width="120">
                            <template slot-scope="scope">
                                <div>{{ scope.row.username }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
                        <el-table-column prop="operation" label="操作" width="100" v-if="permissions.cp_verbal_manage_edit || permissions.cp_verbal_manage_del" fixed="right">
                            <template slot-scope="scope">
                                <el-button v-if="permissions.cp_verbal_manage_edit" @click="editFn(scope.row)" type="text">编辑</el-button>
                                <el-button v-if="permissions.cp_verbal_manage_del" type="text" slot="reference" class="madp-operation-delete" @click="handleapiDel(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="madp-pagination-wrap">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page.current"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="page.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </basic-container>
        <add-group
            :form="addGroupForm"
            :dialogType="dialogType"
            :addDialogShow="dialogShow == 'group'"
            :dialogTitle="dialogTitle"
            @dialogHandleCancel="dialogHandleCancel"
            @dialogHandleSubmit="groupDialogHandleSubmit"
        />
        <add-verbal
            :form="addVerbalForm"
            :dialogType="dialogType"
            :addDialogShow="dialogShow == 'verbal'"
            :dialogTitle="dialogTitle"
            @dialogHandleCancel="dialogHandleCancel"
            @dialogHandleSubmit="verbalDialogHandleSubmit"
        />
        <edit-group-item
            :form="addGroupForm"
            :addDialogShow="dialogShow == 'group-item'"
            :dialogTitle="dialogTitle"
            @dialogHandleCancel="dialogHandleCancel"
            @dialogHandleSubmit="groupItemDialogHandleSubmit"
        />
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
    addAndEditMediumGroup,
    delMediumGroup,
    getMediumGroup,
    addMaterialLibrary,
    editGruopItemName,
    materialLibraryList,
    delMaterialLibrary,
    editMaterialLibrary
} from '@/api/customer-into/verbal-manage';
import addGroup from './add-group.vue';
import addVerbal from './add-verbal.vue';
import editGroupItem from './edit-group-item.vue';
export default {
    components: {
        addGroup,
        addVerbal,
        editGroupItem
    },
    data() {
        return {
            // 搜索话术内容
            searchT: '',
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 分组树数据
            groupData: [],
            // 分组树props
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            // 当前选中分组
            activeGroup: {},
            // 表格样式
            headerCellStyle: {
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            },
            // loading开关
            tableloading: false,
            // 表格数据
            tableData: [],
            // 新增分组表单
            addGroupForm: {
                name: '',
                visibleRange: 1,
                deptIds: [],
                children: []
            },
            // 新增话术表单
            addVerbalForm: {},
            // 弹窗标题
            dialogTitle: '',
            // 弹窗开关
            dialogShow: false,
            // 弹窗类型
            dialogType: ''
        };
    },
    computed: {
        ...mapGetters(['theme', 'permissions'])
    },
    created() {
        this.getMediumGroupList();
    },
    methods: {
        // 搜索分组下话术
        getList(data) {
            if (!data) {
                this.page.current = 1;
            }
            this.tableloading = true;
            let obj = {
                mediumGroupId: this.activeGroup.id,
                current: this.page.current,
                size: this.page.size,
                searchStr: this.searchT
            };
            materialLibraryList(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.page.total = res.data.data.total;
                        this.tableData = res.data.data.records;
                    }
                    this.tableloading = false;
                })
                .catch(() => {
                    this.tableloading = false;
                });
        },
        // 清空搜索内容
        clearInputFn() {
            this.searchT = '';
            this.getList();
        },
        // 新增话术
        handleAddVerbal() {
            this.dialogTitle = '新建话术';
            this.addVerbalForm = {
                mediumGroupId: '',
                collectionTitle: '',
                content: ''
            };
            this.dialogShow = 'verbal';
            this.dialogType = 'add';
        },
        // 新增分组
        handleAddGroup() {
            this.dialogTitle = '新建分组';
            this.addGroupForm = {
                name: '',
                children: [],
                visibleRange: 1,
                deptIds: []
            };
            this.dialogShow = 'group';
            this.dialogType = 'add';
        },
        // 点击分组树节点
        handleNodeClick(data) {
            let { id } = data;
            if (this.activeGroup.id != id) {
                this.activeGroup = data;
                this.getList();
            }
        },
        // 侧边栏分组列表显示
        getMediumGroupList() {
            getMediumGroup().then((res) => {
                if (res.data.code != 0) return;
                this.groupData = res.data.data;
                this.activeGroup = this.groupData[0];
                this.getList();
            });
        },
        // 编辑分组
        editGroup(data) {
            this.dialogShow = data.children ? 'group' : 'group-item';
            this.addGroupForm = JSON.parse(JSON.stringify(data));
            this.dialogTitle = '编辑分组';
            this.dialogType = 'edit';
        },
        // 删除分组
        deleteGroup(data) {
            this.$confirm('是否确认删除分组', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    delMediumGroup(data.id).then((res) => {
                        if (res.data.code === 0) {
                            this.getMediumGroupList();
                            this.$message.success('分组删除成功!');
                        }
                    });
                })
                .catch(() => {});
        },
        // 查看分组可见范围
        viewGroupVisible() {
            this.addGroupForm = this.activeGroup;
            this.dialogTitle = '查看分组可见范围';
            this.dialogShow = 'group';
            this.dialogType = 'viewVisibleRange';
        },
        // 修改分组可见范围
        editGroupVisible() {
            this.addGroupForm = this.activeGroup;
            this.dialogTitle = '修改分组可见范围';
            this.dialogShow = 'group';
            this.dialogType = 'visibleRange';
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getList(1);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getList(1);
        },
        // 获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.size + $index + 1;
        },
        // 弹窗点击关闭
        dialogHandleCancel() {
            this.dialogShow = false;
        },
        // 分组弹窗点击确定
        groupDialogHandleSubmit(data) {
            data.children = data.children.map((i, index) => {
                let { id, name } = i,
                    obj = {
                        name,
                        order: index
                    };
                if (id) obj.id = id;
                return obj;
            });
            delete data.childrenName;
            if (data.needConfirm) {
                this.$confirm('删除的子分组中包含已有的子分组，是否确认删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        delete data.needConfirm;
                        this.addAndEditGroup(data);
                    })
                    .catch(() => {
                        return;
                    });
            } else {
                this.addAndEditGroup(data);
            }
        },
        // 话术更新
        addAndEditGroup(data) {
            addAndEditMediumGroup(data, this.dialogType == 'add' ? 'post' : 'put').then((res) => {
                if (res.data.code == 0) {
                    this.getMediumGroupList();
                    this.$message.success(`${this.dialogType == 'add' ? '添加' : '编辑'}分组成功!`);
                    this.dialogHandleCancel();
                }
            });
        },
        // 话术列表删除按钮
        handleapiDel(row) {
            this.$confirm('是否确认删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let id = row.id;
                    delMaterialLibrary(id).then((res) => {
                        if (res.data && res.data.code == 0) {
                            this.getList(1);
                            this.$message.success('删除成功!');
                        }
                    });
                })
                .catch(() => {});
        },
        // 话术弹窗点击确定
        verbalDialogHandleSubmit(data) {
            let { mediumGroupId, collectionTitle, content, id } = data,
                obj = {
                    mediumGroupId: mediumGroupId[mediumGroupId.length - 1],
                    collectionTitle,
                    content,
                    type: 1
                };
            if (this.dialogType == 'add') {
                addMaterialLibrary(obj).then((res) => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.getList(1);
                        this.dialogHandleCancel();
                    }
                });
            } else {
                obj.id = id;
                editMaterialLibrary(obj).then((res) => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '编辑成功'
                        });
                        this.getList(1);
                        this.dialogHandleCancel();
                    }
                });
            }
        },
        // 子分组编辑点击确定
        groupItemDialogHandleSubmit(data) {
            let { id, name } = data;
            editGruopItemName({ id, name }).then((res) => {
                if (res.data.code != 0) return;
                this.$message({
                    type: 'success',
                    message: '编辑成功'
                });
                this.getMediumGroupList();
                this.dialogHandleCancel();
            });
        },
        // 编辑话术
        editFn(data) {
            this.addVerbalForm = data;
            this.dialogTitle = '编辑话术';
            this.dialogShow = 'verbal';
            this.dialogType = 'edit';
        }
    }
};
</script>
<style scoped lang="scss">
.madp-verbal {
    min-width: 1200px;
    &-search {
        text-align: right;
    }
    &-content {
        display: flex;
        justify-content: space-between;
        height: calc(100vh - 12rem);
        &-group {
            min-width: 12rem;
            overflow: auto;
            position: relative;
            &-btns {
                text-align: center;
                position: fixed;
                z-index: 1;
                width: 12rem;
                background: #fff;
                height: 5.6rem;
                padding: 1rem 0;
                box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
                .el-button {
                    width: 80%;
                    margin-bottom: 5px;
                }
                .el-button + .el-button {
                    margin-left: 0;
                }
            }
            &-list {
                position: relative;
                top: 6rem;
                .custom-tree-node {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    padding-right: 20px;
                }
            }
        }
        &-group ::-webkit-scrollbar {
            display: none;
        }
        &-list {
            flex: 1;
            margin-left: 10px;
            &-visible {
                .bold {
                    font-weight: bold;
                }
            }
            .madp-pagination-wrap {
                text-align: right;
                margin: 10px 5px;
            }
        }
    }
}
.madp-content-T {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
}
</style>
